<template>
<view class="xfx-sinput">
	<view class="search-card">
		<view class="bubble-card" v-show="showBubble&&isBubble">
		<view v-for="(item,index) in searchList" :key="index" @click="clickBubble(item)">
			<text>{{item}}</text>
		</view>
    </view>
		<view @click="goChange">
		    <text>{{title}}</text>
			<image src="@/static/xialaxuanze.png" :class="{'bbb':showBubble}" mode="" />
		</view>
		<view class="">
			<icon type='search' size='20'></icon>
            <input v-model="searchValue" @confirm='confirmm' :disabled='isDisabled' :placeholder="placeholderText" type="text" name="" id="">
			<icon v-if="searchValue.length>0&&isClear" @click="searchValue=''" type="clear" size="16" color="" />
		</view>
	</view>
	 <view v-if="showSearchtext" @click="search" class="search-text" :style="{color:searchColor}">{{searchText}}</view>
</view>
</template>

<script>
	export default {
        props: {
    placeholderText: {
      type: String,
      default: "请输入",
    },
    isBubble: {
        type: Boolean,
        default:true
    },
    searchText:{
        type:String,
        default:'搜索',
    },
    searchColor:{
        type:String,
        default:'#000000'
	},
	isDisabled:{
		type:Boolean,
		default:false
	},
    searchList:{
        type:Array,
        default:[]
	},
	showSearchtext:{
		type:Boolean,
		default:true
	},
	isClear:{
		type:Boolean,
		default:true
	}
        },
		data() {
			return {
				title:'筛选',
				showBubble:false,
				searchValue:'',
            }
		},
		watch:{
			searchValue(neww,old) {
				this.$emit('input',neww)
			}
		},
		onLoad() {

		},
		methods: {
           goChange () {
               this.showBubble = true
               if(this.isBubble) {
                //    this.showBubble = true
               }else {
                   var that = this
                      uni.showActionSheet({
				   itemList: that.searchList,
				   success: function (res) {
					   console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					   console.log(that.searchList)
                       that.title = that.searchList[res.tapIndex]
					   that.$emit('confirm',that.searchList[res.tapIndex])
					   that.showBubble = false
				   },
				   fail: function (res) {
					   console.log(res.errMsg);
					   that.showBubble = false
				   }
			   });
               }
			   var that = this
			   that.showBubble = true
		   },
		   clickBubble (item) {
               this.$emit('confirm',item)
               this.title = item
			   this.showBubble = false
		   },
		   confirmm(e) {
               console.log(e)
               this.$emit('search')
		   },
		   search () {
               this.$emit('search')
		   }
		}
	}
</script>

<style lang='scss'>
.xfx-sinput {
	margin-top: 100px;
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
    display: flex;
	position: relative;
	.search-card {
		flex: 1;
		padding: 0 10rpx;
		background: #ffffff;
		border: 1px solid #e2e2e2;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		.bubble-card {
	   position: absolute;
	   z-index:10;
	   left: 50rpx;
	   top: 110%;
	   border: 1px solid #e2e2e2;
	   background-color: #ffffff;
	   padding: 25rpx;
	   border-radius: 5rpx;
	   &>view {
		   margin-bottom: 20rpx;
	   }
	   &>view:nth-last-child(1) {
		   margin-bottom: 0;
	   }
	}
	.bubble-card::after {
		content: '';
		display: block;
		border: 15rpx solid #ffffff;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-top: 15rpx solid transparent;
		position: absolute;
		top: -28rpx;
		left:45rpx
	}
       &>view:nth-child(2) {
		   display: flex;
		   align-items: center;
		   padding: 0 15rpx;
		   position: relative;
          text {

		  }
		  image {
			  margin-left:15rpx;
			  transition: all 0.3s;
			  width: 25rpx;
			  height: 25rpx;
		  }
	   }
	   &>view:nth-child(3) {
		   flex: 1;
		   padding-left: 25rpx;
		   padding-right: 15rpx;
		   display: flex;
		   align-items: center;
		   input {
			   padding: 15rpx 10rpx;
		   }
	   }
	}
	.search-text {
	   padding-left: 25rpx;
	   display: flex;
	   align-items: center;
	   font-size: 36rpx;
	   line-height: 1;
	}
}
.bbb {
	transform: rotate(-180deg);
}
</style>
